<script setup lang="ts">
import RadarEchart from './RadarEchart.vue';
import HeatMapEchart from './HeatMapEchart.vue';
</script>

<template>
  <div class="container">
    <div class="left">
      <div class="left_header">
        <img src="/course/g1.svg" alt="" />
        <div class="content">
          <p>出类拔萃</p>
          <span>一名前端小菜鸡，努力学习中</span>
        </div>
        <div class="card">
          <span>92.56</span>
          <span>评分</span>
        </div>
      </div>
      <div style="height: 5%"></div>
      <div class="left_body">
        <HeatMapEchart></HeatMapEchart>
      </div>
    </div>
    <div class="right">
      <div class="right_header">
        <p>学习进度条</p>
        <p>2022-09-01 ~ 2023-01-16</p>
        <div class="progress">
          <div class="title">
            <span>1</span>
            <span>小程序</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="12" :percentage="70" />
        </div>
        <div class="progress">
          <div class="title">
            <span>2</span>
            <span>小程序</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="12" :percentage="70" status="success" />
        </div>
        <!-- <div class="progress">
          <div class="title">
            <span>3</span>
            <span>未完成</span>
          </div>
          <el-progress :text-inside="true" :stroke-width="12" :percentage="30" status="warning" />
        </div> -->
      </div>
      <div style="height: 5%"></div>
      <div class="right_body">
        <RadarEchart></RadarEchart>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  @include flex;
  .left {
    width: 60%;
    height: 100%;
    &_header {
      height: 30%;
      @include flex;
      // background-color: #387dff;
      .content {
        color: #ffffff;
        // color: $blue-color;
        color: rgba(51, 70, 129, 1);
        @include flex-column(flex-start, flex-start);

        p {
          font-size: 30px;
        }
        span {
          width: 200px;
          height: 30px;
        }
      }
      .card {
        width: 150px;
        height: 150px;
        border-radius: 10px;
        // border: 4px solid #fff;
        @include flex-column();
        box-shadow: $box-shadow;
        span {
          font-size: 30px;
          color: #ffd500;
          color: $theme-color;
        }
      }
    }
    &_body {
      height: 65%;
      @include flex();
    }
  }
  .right {
    width: 35%;
    height: 100%;
    &_header {
      height: 30%;
      p:nth-child(1) {
        font-size: 20px;
        font-weight: 600;
        color: rgba(51, 70, 129, 1);
      }
      p:nth-child(2) {
        color: rgba(133, 144, 179, 1);
      }
      .progress {
        margin-bottom: 10px;
        .title {
          @include flex(flex-start);
          margin-bottom: 10px;
          span {
            color: rgba(51, 70, 129, 1);
          }
          span:nth-child(1) {
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 2px;
            background-color: #f5f6f8;
            margin-right: 10px;
            @include flex;
            font-size: 10px;
          }
        }
      }
    }
    &_body {
      height: 65%;
      @include flex();
      // background-color: #387dff;
    }
  }
}

:deep(.el-progress-bar__outer) {
  background: #f9f9fb;
}
</style>
